<template>
    <div class="home_exGratia_box outer_shadows" @mouseover="m_hover" @mouseout="m_out">
        <div class="home_exGratia_header">
            <div>
                <span class="home_exGratia_preferential">大家都在玩</span>
                <span class="home_exGratia_subheading">免费免费不要钱！&nbsp;<router-link to="/game">更多游戏</router-link></span>
            </div>

            <div class="home_exGratia_choose">
                   <span class="home_exGratia_but" @click="next(true)">
                       <img src="/public/img/home/arrow_left.png" alt="">
                   </span>

                <span class="home_exGratia_but right_but" @click="next(false)">
                          <img src="/public/img/home/arrow_left.png" alt="">
                </span>
            </div>
        </div>

        <ul class="home_exGratia_content" v-if="props.dataList.length>1">
            <li v-for="(item,index) in count" :key="index"
                :style="{'--delay': direction ? index*0.2+'s' : ((count-index)*(0.2))+'s'}"
                @click="toDetail(props.dataList[index_data+index].id)">
                <span class="home_exGratia_logotype">精品游戏</span>
                <img :src="props.dataList[index_data+index].cover" alt="" title="查看详情" :key="index_data" class="home_exGratia_img">
                <p v-html="content((props.dataList[index_data + index].title)) "></p>
                <div class="home_exGratia_time_visit">
                    <span class="home_exGratia_time_visit_content"><img src="/public/img/detail/clock_content.png" alt="">{{dayjs(props.dataList[index_data + index].time ).format(base.dateFormat)}}</span>
                    <span class="home_exGratia_time_visit_content"><img src="/public/img/detail/support_content.png" alt="">{{format.n_format(props.dataList[index_data + index].visit)  }}</span>
                </div>
            </li>
        </ul>


    </div>
</template>

<!--特惠轮播图-->
<script setup>
import format from "@/config/methods/digital.js"
import base from "@/config/constant/constant.js"
import {onMounted, ref, onBeforeUnmount} from "vue";
import dayjs from "dayjs";
//收到的图片列表
const props = defineProps({
    dataList: {
        type:Array,
        default:[{
            id: 0,
            uid: 0,//文章所属用户id
            body: "", //文章内容
            title: "", //文章标题
            support: 0, //点赞数
            visit: 0, //浏览数
            cover: "", //封面
            time: new Date,//文章时间
            kind: "",//文章类型
        }]
    }
})
const index_data = ref(0); //指定当前是第几图片
const nextTimer = ref(null); //自动轮播定时器


//控制数据列表的展示个数
const count = ref(4);

//控制动画的方向，默认从左边开始,true左 false右
const direction = ref(true);

//页面加载执行方法
onMounted(() => {
    startTimer();
});



const content = (item) => {
    let first = '<span style="font-size: 15px;font-weight: bolder" >【特价优惠】</span>';
    return (first + item);
}

//鼠标移入
const m_hover = () => {
    clearInterval(nextTimer.value);
};
//鼠标移出
const m_out = () => {
    startTimer();
};

//切换特惠列表
const next = (bool) => {
    count.value = 0;
    if (bool) {
        direction.value = true;
        if (index_data.value <= 0) {
            index_data.value = props.dataList.length-4;
        } else {
            index_data.value -= 4;
        }
    }else {
        direction.value = false;
        if (index_data.value >= (props.dataList.length-4)) {
            index_data.value = 0;
        } else {
            index_data.value += 4;
        }
    }
   setTimeout(()=>{
       count.value = 4;
   },100)
}

//定时器
const startTimer = () => {
    nextTimer.value = setInterval(() => {
        next(true)
    }, 5000)
}

//离开页面销毁定时器
onBeforeUnmount(() => {
    clearInterval(nextTimer.value)
    nextTimer.value = null;
});

//跳转详情页面
const toDetail =(item)=>{
    window.open("#/articleDetails?id="+item,'_blank');
    window.localStorage.setItem("Current_option","1000");
}

</script>

<style scoped>
img {
    object-fit: cover;
}

.home_exGratia_box {
    position: relative;
    overflow: hidden;
    padding: 10px 10px 20px;
}

.home_exGratia_header {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(63, 58, 58, 0.32);
}


.home_exGratia_content {
    width: 100%;
    min-height: 250px;
    display: grid;
    list-style: none;
    justify-content: space-around;
    grid-template-columns: repeat(4, 24%);
}

.home_exGratia_content li {
    position: relative;
    min-height: 250px;
    padding: 5px;
    box-shadow: 0 1px 3px rgba(40, 40, 40, 0.3);
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all .3s;
    cursor: pointer;
    animation: home_exGratia_li .8s ease-in-out 0s 1 forwards;
    animation-delay: var(--delay);
    opacity: 0;
}
.home_exGratia_content li:hover{
    transform: translateY(-10px);
    box-shadow: 0 2px 4px rgba(82, 84, 86, 0.4);
}

.home_exGratia_img {
    width: 180px;
    aspect-ratio: 5/4;
    margin: auto;
    transition: all .3s;
    z-index: 1;
}


.home_exGratia_but {
    display: flex;
    width: 25px;
    height: 25px;
    justify-content: center;
    align-items: center;
    z-index: 1;
    margin: 0 5px;
    transform: rotateZ(90deg);
    transition: all .2s;
    background: rgba(76, 77, 79, 0.25);
    animation: move_l .8s ease-in 0s 1 forwards;
}

.home_exGratia_but:hover {
    background: rgb(109, 166, 225);
    cursor: pointer;
}

.home_exGratia_but img {
    width: 20px;
}

.home_exGratia_choose {
    display: flex;
}

.right_but {
    transform: rotateZ(-90deg) !important;
}

.home_exGratia_logotype {
    position: absolute;
    top: 5%;
    left: 5%;
    font-size: 13px;
    padding: 3px 6px;
    border-radius: 3px;
    z-index: 5;
    color: white;
    background: rgba(84, 80, 80, 0.85);
}

.home_exGratia_preferential {
    font-size: 18px;
    font-weight: bolder;
    margin-right: 5px;
}

.home_exGratia_content li p {
    overflow: hidden;
    width: 190px;
    height: 40px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    font-size: 14px;
    -webkit-box-orient: vertical;
    margin-bottom: 10px;
}

.home_exGratia_content li p:hover {
    color: #6da6e1;
}

.home_exGratia_time_visit span {
    font-size: 13px;
}
.home_exGratia_time_visit{
    display: flex;
    justify-content: space-between;
}
.home_exGratia_time_visit_content{
    display: flex;
    align-items: center;
}
.home_exGratia_time_visit_content img{
    width: 15px;
}
.home_exGratia_subheading{
    font-size: 14px;
}
@keyframes move_l {
    0% {
        transform: rotateZ(90deg) scale(0);
    }
    100% {
        transform: rotateZ(90deg) scale(1);
    }
}

@keyframes move_r {
    0% {
        transform: rotateZ(270deg) scale(0);
    }
    100% {
        transform: rotateZ(270deg) scale(1);
    }
}


.home_exGratia_content_li{
    display: inline-block;
    animation: home_exGratia_li .8s ease-in-out 0s 1 forwards;
}
@keyframes home_exGratia_li {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    40% {
        opacity: 0.5;
        transform: scale(1.03);
    }
    50% {
        opacity: 0.8;
        transform: scale(1);
    }
    70% {
        opacity: 1;
        transform: scale(1.02);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
</style>